<template>
    <div class="bg"> <el-form ref="ruleFormRef" style="width: 300px" :model="ruleForm" :rules="rules" label-width="auto" class="bd">
        <el-form-item label="Activity name" prop="userName">
            <el-input v-model="ruleForm.userName" />
        </el-form-item>
        <el-form-item label="Activity name" prop="passWord">
            <el-input v-model="ruleForm.passWord" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)" style="width: 200px;">
                Create
            </el-button>
        </el-form-item>
    </el-form></div>
   
</template>

<script setup>
import { reactive, ref } from 'vue'
const ruleFormRef = ref()
const ruleForm = reactive({
    userName: '',
    passWord: '',
})
const rules = reactive({
    userName: [
        { required: true, message: 'Please input Activity name', trigger: 'blur' },
        { min: 3, max: 20, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    passWord: [
        { required: true, message: 'Please input Activity name', trigger: 'blur' },
        { min: 3, max: 8, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
})
import { useRouter } from 'vue-router'
const router = useRouter()
import { loginApi } from '@/api/api'
import { ElMessage } from 'element-plus'
const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            loginApi(ruleForm.userName, ruleForm.passWord).then(res => {
                console.log(ruleForm.userName, ruleForm.passWord);
                if (res.data.code == 1) {
                    ElMessage({
                        message: 'Congrats, this is a success message.',
                        type: 'success',
                    })
                    localStorage.setItem('token', res.data.token)
                    router.push('/')
                } else {
                    ElMessage.error('Oops, this is a error message.')
                }

            })

        } else {
            console.log('error submit!', fields)
        }
    })
}
</script>

<style lang="scss" scoped>


.bg{
    width: 100%;
    height: 100vh;
    background-color: #1e1e1e;
    .bd{
        position: relative;
        background-color: #fff;
     margin: 20px;
     padding: 20px;

     border-radius: 6px;
        left: 800px;
        top: 300px;
   button{
margin-left: 50px;
   }
    }
}
</style>